<template>
  <el-card class="mt-20" shadow="hover">
    <el-button
      type="primary"
      :icon="Plus"
      :disabled="!categoryStore.category3Id"
      @click="showAddAttr"
      >添加属性</el-button
    >
    <el-table class="mt-20" :data="attrList" border>
      <el-table-column
        prop=""
        label="序号"
        width="80"
        type="index"
        align="center" />
      <el-table-column prop="attrName" label="属性名称" width="150" />
      <el-table-column prop="" label="属性值列表">
        <template v-slot="{ row }">
          <el-tag
            class="ml-2"
            type="success"
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="150">
        <template v-slot="{ row }">
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            @click="showUpdateAttr(row)"></el-button>
          <el-popconfirm
            :title="`确认删除${row.attrName}吗？`"
            width="200"
            @confirm="confirmEvent(row)">
            <template #reference>
              <el-button type="danger" :icon="Delete" size="small"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AttrList",
};
</script>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { getAttrListApi, delAttrListApi } from "@/api/product/attr";
import type { AttrList, AttrItem } from "@/api/product/model/attrModels";
import { useCategoryStore } from "@/stores/category";
import { useAttrStore } from "@/stores/attr";
import { ElMessage } from "element-plus";
const categoryStore = useCategoryStore(); // 使用pinia
const attrStore = useAttrStore();

/******************************修改属性*********************************/
// 点击修改按钮
const showUpdateAttr = ({ attrName, attrValueList, id }: AttrItem) => {
  // 和添加属性是一个页面
  emit("setIsShowAttr", false);
  // 把row值 给到pinia 然后update组件展示
  attrStore.attr.attrName = attrName;
  attrStore.attr.attrValueList = attrValueList;
  attrStore.attr.id = id;
};
/******************************删除属性*********************************/
// 删除属性
const confirmEvent = async ({ id }: AttrItem) => {
  await delAttrListApi(id as number);
  ElMessage.success("删除成功~~~");
  getAttrList();
};
/******************************监视三级id ***********************************/
// 商品属性展示
const attrList = ref<AttrList>([]);

// 封装公共请求函数
const getAttrList = async () => {
  const { category1Id, category2Id, category3Id } = categoryStore;

  // 发送获取属性数据
  const res = await getAttrListApi({
    category1Id: category1Id as number,
    category2Id: category2Id as number,
    category3Id: category3Id as number,
  });
  attrList.value = res;
};

// 监视三级分类改变就发送 获取属性列表
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    // 判断是否有三级分类的值  没有就退出 不发请求
    if (!category3Id) {
      attrList.value = [];
      return;
    }
    getAttrList();
  },
  // 跳回来 重新渲染数据 立即监视
  { immediate: true }
);

/********************组件切换**************************/
// 调用自定义函数 切换组件
const emit = defineEmits(["setIsShowAttr"]);
// 添加属性
const showAddAttr = () => {
  emit("setIsShowAttr", false);
  attrStore.$reset();
};
</script>

<style scoped></style>
